<template>
    <div class="find">
        <!-- 顶部 -->
            <app-header>
                <template v-slot:header-tit>
                    发现
                </template>
            </app-header>
        <!-- 内容 -->
        <section class="contain-box">
             <!-- 加载中动画 -->
            <transition
                leave-active-class="animate__animated animate__fadeOutUp animate__faster">
                <loading  v-if="isLoading"></loading>
            </transition>

            <transition
                enter-active-class="animate__animated animate__fadeInUpBig" >
                <div v-if="!isLoading">
                     <div v-for="item in findList" :key="item.id">
                        <find-card :cardObj="item"></find-card>
                    </div>
                </div>
            </transition>
           
            
        </section>
    </div>
</template>

<script>
import appHeader from "../components/app-header.vue"
import findCard from "../components/find-card.vue"
import loading from '../components/loading.vue'
export default {
    name:"Find",
    components:{
        appHeader,
        findCard,
        loading
    },
    data(){
        return{
            findList:[],
            isLoading:true,
            loadingTime:300
        }
    },
    mounted(){
        let _loading = localStorage.getItem("_loading");
        // 判断是否发起请求
        if(_loading){
            this.isLoading = _loading;//表示正在请求
        }

        axios.get("/data/find.json")
        .then(
            res=>{
                this.findList = [...res.data.resData.list];
                let d = setTimeout(()=>{
                    this.isLoading = false;// 隐藏正在加载
                    localStorage.setItem("_loading",false);
                    clearTimeout(d);
                },this.loadingTime);
            }
        )
        .catch(
            err=>{
                console.log(err);
            }
        )
    }
}
</script>

<style lang="scss" scoped>
$bodyCol:rgb(241,240,245);
$maxWidth:645px;
.contain-box{
    width: 100%;
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 43px;
    height: (100%-14);
    overflow-y: scroll;
    background-color: $bodyCol;
}

</style>